<template>
    <div class="diff-result">
        <!--数据源信息-->
        <div>
            <el-row class="datasource-row">
                <el-col :span="11" class="datasource-name flex-column-v">
                    <div v-if="!loading" style="line-height: 40px">
                        <svg-icon icon-class="database" class="mr5">
                        </svg-icon>
                        {{
                        result.datasourceDiff.left.name
                        }}
                        （{{ result.datasourceDiff.left.database }}）
                    </div>
                    <div v-else style="line-height: 40px">
                        分析中...
                    </div>
                </el-col>
                <el-col :span="2">
                    <div class="flex-column-v pd10">
                        <svg-icon icon-class="vs2" :size="30"></svg-icon>
                    </div>
                </el-col>
                <el-col :span="11" class="datasource-name flex-column-v">
                    <div v-if="!loading">
                        <svg-icon icon-class="database" class="mr5">
                        </svg-icon>
                        {{
                        result.datasourceDiff.right.name
                        }}
                        （{{ result.datasourceDiff.right.database }}）
                    </div>
                    <div v-else>
                        分析中...
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-page-header @back="$router.go(-1)" class="pd10">
            <template #default>
                <div class="diff-result">
                    <!--表信息-->
                    <el-scrollbar class="" height="calc(100vh - 130px)">
                        <div v-for="table in filterTableDiffs"
                             class="pdt10 pdb10"
                             style="background: #f5f7fa">
                            <el-row class="">
                                <el-col :span="11" class="pdl10">
                                    <div class="flex" style="font-size: 16px">
                                        <el-icon size="20">
                                            <svg-icon
                                                    icon-class="table"></svg-icon>
                                        </el-icon>
                                        <div class="ml10">
                                <span v-if="table.left.diffType==='LACK'"
                                      class="lack-text">
                                    表缺失
                                </span>
                                            <span v-else>
                                    {{ table.left.tableName }}
                                    <span
                                            class="color-secondary ml20">{{
                                        table.left.tableComment
                                        }}</span>
                                </span>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="2"
                                        class="flex-column-v">
                                    <el-button
                                            v-if="getTableDiffType(table).isDiff"
                                            :type="getTableDiffType(table).color"
                                            @click="showDiffDetail(table)"
                                            size="" :color="'#5a7bfd'">
                                        {{ getTableDiffType(table).msg }}
                                    </el-button>
                                    <el-button v-else
                                               :type="getTableDiffType(table).color"
                                               @click="showDiffDetail(table)"
                                               size="">
                                        {{ getTableDiffType(table).msg }}
                                    </el-button>
                                </el-col>
                                <el-col :span="11" class=" pdl10">
                                    <div class="flex" style="font-size: 16px">
                                        <el-icon size="20">
                                            <svg-icon
                                                    icon-class="table"></svg-icon>
                                        </el-icon>
                                        <div class="ml10">
                                <span v-if="table.right.diffType==='LACK'"
                                      class="lack-text">
                                    表缺失
                                </span>
                                            <span v-else>
                                    {{ table.right.tableName }}
                                                <span
                                                        class="color-secondary ml20">{{
                                                    table.right.tableComment
                                                    }}</span>
                                </span>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <!--详情-->
                            <div v-if="table.showDiffDetail">
                                <!--表信息-->
                                <el-row>
                                    <el-col :span="11" class="pd10">
                                        <div v-if="table.left.diffType==='LACK'"
                                             class="flex-column-v">
                                            <svg-icon icon-class="empty"
                                                      :size="300"></svg-icon>
                                            <span class="color-secondary">表缺失</span>
                                        </div>
                                        <div v-else>
                                            <!--表信息-->
                                            <el-table :data="[table.left]"
                                                      :cell-class-name="getLeftCellClass">
                                                <el-table-column label="表名"
                                                                 prop="tableName"
                                                                 width="150"
                                                                 show-overflow-tooltip>
                                                </el-table-column>
                                                <el-table-column label="表类型"
                                                                 prop="tableType">
                                                </el-table-column>
                                                <el-table-column label="表注释"
                                                                 prop="tableComment"
                                                                 show-overflow-tooltip>
                                                </el-table-column>
                                                <el-table-column label="索引"
                                                                 prop="tableIndex"
                                                                 show-overflow-tooltip>
                                                </el-table-column>
                                            </el-table>
                                            <!--字段信息-->
                                            <el-table
                                                    :data="table.left.columnAttrs"
                                                    class="mt5"
                                                    :row-class-name="getLeftRowClass"
                                                    :cell-class-name="getLeftCellClass">
                                                <el-table-column label="字段"
                                                                 prop="columnName"
                                                                 show-overflow-tooltip
                                                >
                                                    <template #default="{row}">
                                                        {{
                                                        filter(row, 'columnName', 'left')
                                                        }}
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="类型"
                                                                 prop="columnType"
                                                                 width="120"
                                                                 show-overflow-tooltip>
                                                </el-table-column>
                                                <el-table-column label="默认值"
                                                                 prop="columnDefault"
                                                                 width="150"
                                                                 show-overflow-tooltip>
                                                </el-table-column>
                                                <el-table-column label="可空"
                                                                 prop="columnNull"
                                                                 width="60"
                                                                 align="center">
                                                    <template #default="{row}">
                                                        {{
                                                        row.columnNull ? '√' : ''
                                                        }}
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="注释"
                                                                 prop="columnComment"
                                                                 show-overflow-tooltip>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-col>
                                    <el-col @click="" :span="2"
                                            class="flex-column-v">
                                        <div v-if="table.diffType==='LACK'">

                                        </div>
                                        <div v-else-if="table.diffType==='SAME'">

                                        </div>
                                        <div v-else class="flex-column-v">
                                            <el-button @click="showDiffSql"
                                                       class="mt10" size=""
                                                       style="height: 80px">
                                                差异SQL
                                            </el-button>
                                            <el-table
                                                    :data="table.left.columnDiffs"
                                                    class="mt5"
                                                    :cell-class-name="getCellClassName">
                                                <el-table-column label="异同"
                                                                 prop="diff"
                                                                 align="center">
                                                    <template #default="{row}">
                                                        {{
                                                        getColumnDiffType(row).msg
                                                        }}
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-col>
                                    <el-col :span="11" class="pd10">
                                        <div v-if="table.right.diffType==='LACK'"
                                             class="flex-column-v">
                                            <svg-icon icon-class="empty"
                                                      :size="300"></svg-icon>
                                            <span class="color-secondary">表缺失</span>
                                        </div>
                                        <div v-else>
                                            <!--表信息-->
                                            <el-table :data="[table.right]"
                                                      :cell-class-name="getRightCellClass">
                                                <el-table-column label="表名"
                                                                 prop="tableName"
                                                                 width="150"
                                                                 show-overflow-tooltip>
                                                </el-table-column>
                                                <el-table-column label="表类型"
                                                                 prop="tableType">
                                                </el-table-column>
                                                <el-table-column label="表注释"
                                                                 prop="tableComment"
                                                                 show-overflow-tooltip>
                                                </el-table-column>
                                                <el-table-column label="索引"
                                                                 prop="tableIndex"
                                                                 show-overflow-tooltip>
                                                </el-table-column>
                                            </el-table>
                                            <!--字段信息-->
                                            <el-table
                                                    :data="table.right.columnAttrs"
                                                    class="mt5"
                                                    :row-class-name="getRightRowClass"
                                                    :cell-class-name="getRightCellClass">
                                                <el-table-column label="字段"
                                                                 prop="columnName"
                                                                 show-overflow-tooltip
                                                >
                                                    <template #default="{row}">
                                                        {{
                                                        filter(row, 'columnName', 'right')
                                                        }}
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="类型"
                                                                 prop="columnType"
                                                                 width="120"
                                                                 show-overflow-tooltip>
                                                </el-table-column>
                                                <el-table-column label="默认值"
                                                                 prop="columnDefault"
                                                                 width="150"
                                                                 show-overflow-tooltip>
                                                </el-table-column>
                                                <el-table-column label="可空"
                                                                 prop="columnNull"
                                                                 width="60"
                                                                 align="center">
                                                    <template #default="{row}">
                                                        {{
                                                        row.columnNull ? '√' : ''
                                                        }}
                                                    </template>
                                                </el-table-column>
                                                <el-table-column label="注释"
                                                                 prop="columnComment"
                                                                 show-overflow-tooltip>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
            </template>
            <template #content>
                <div class="flex-center">
                    <el-select v-model="filters.type" style="width: 7vw">
                        <el-option value="table" key="table" label="表过滤"></el-option>
                        <el-option value="column" key="column" label="字段过滤"></el-option>
                    </el-select>
                    <el-input v-model="filters.kw" prefix-icon="search"
                              :placeholder="$t('compare.filterTable')"
                              class="mr20 ml10" style="width: 28vw"></el-input>
                    <div class="flex" style="width:30vw;overflow-x: auto">
                        <el-checkbox v-model="compareConfig.onlyDiff"
                                     class="ml5">
                            {{ $t('compareConfig.onlyShowDiff') }}
                        </el-checkbox>
                        <el-checkbox v-model="compareConfig.ignoreTableComment"
                                     class="ml5">
                            {{ $t('compareConfig.ignoreTableComment') }}
                        </el-checkbox>
                        <el-checkbox v-model="compareConfig.ignoreColumnComment"
                                     class="ml5">
                            {{ $t('compareConfig.ignoreColumnComment') }}

                        </el-checkbox>
                        <el-checkbox
                                v-model="compareConfig.ignoreColumnNullable"
                                class="ml5">
                            {{ $t('compareConfig.ignoreColumnNullable') }}

                        </el-checkbox>

                    </div>
                    <el-button @click="downloadReport" class="ml20" text
                               icon="download">
                        {{ $t('compare.downloadReport') }}
                    </el-button>
                </div>
            </template>

        </el-page-header>
    </div>
    <el-dialog v-model="showDiffSqlDraw" title="差异SQL" width="20vw">
        功能开发中，敬请期待...
    </el-dialog>
</template>


<script>
import SvgIcon from "../../components/SvgIcon/index.vue";
import api from "@/api/api.js";
import util from "@/utils/util.js";

export default {
    name: 'diff-result',
    components: {SvgIcon},
    data() {
        return {
            result: {
                datasourceDiff: {
                    left: {},
                    right: {}
                }
            },
            //表差异
            tableDiffs: [],
            //过滤后的表差异
            filterTableDiffs: [],
            loading: true,
            //过滤条件
            filters: {
                type: 'table',
                kw: null
            },
            //对比配置
            compareConfig: {
                ignoreColumnComment: false,
                ignoreColumnNullable: false,
                ignoreTableComment: false,
                onlyDiff: false,
            },
            showDiffSqlDraw: false
        }
    },
    created() {
        this.init()
    },
    watch: {
        filters: {
            handler() {
                this.filterTable()
            },
            deep: true
        },
        compareConfig: {
            handler() {
                this.diffDetail()
                this.filterTable()
            },
            deep: true
        }
    },
    methods: {
        init() {
            this.diffDetail()
        },
        diffDetail() {
            this.loading = true
            api.analysis({
                datasourceId1: this.$route.query.datasourceId1,
                datasourceId2: this.$route.query.datasourceId2,
                compareConfig: this.compareConfig
            }).then(res => {
                const data = res.data.data
                this.result = data
                this.tableDiffs = data.tableDiffs || []
                this.filterTableDiffs = data.tableDiffs || []
                this.loading = false
                this.filterTable()
            })
        },
        showDiffDetail(table) {
            if (table.showDiffDetail) {
                table.showDiffDetail = false
                return
            }
            this.filterTableDiffs.forEach(v => {
                v.showDiffDetail = false
            })
            table.showDiffDetail = true
        },
        downloadReport() {
            api.downloadReport({
                datasourceId1: this.$route.query.datasourceId1,
                datasourceId2: this.$route.query.datasourceId2,
                compareConfig: this.compareConfig
            })
        },
        filter(row, attr, lr) {
            const diffs = row.diff || []
            let value = ''
            diffs.forEach(v => {
                if (v.key === attr) {
                    if (lr === 'left') {
                        value = v.leftValue
                    } else if (lr === 'right') {
                        value = v.rightValue
                    }
                }
            })
            if (!value) {
                return this.$t('compare.lack')
            }
            return value
        },
        getLeftRowClass({row, rowIndex}) {
            //字段缺失
            if (!row.columnName) {
                return 'lack-row'
            }
        },
        getLeftCellClass({row, column, rowIndex, columnIndex}) {

            const diff = row.diff
            let cellClass = ''
            diff.forEach(v => {
                if (column.property === v.key) {
                    if (v.diffType === 'LACK') {
                        if (!v.leftValue && v.rightValue) {
                            cellClass = 'lack-cell'
                        }
                    } else if (v.diffType === 'DIFF') {
                        cellClass = 'diff-cell'
                    }
                }
            })
            return cellClass
        },
        getRightRowClass({row, rowIndex}) {
            //字段缺失
            if (!row.columnName) {
                return 'lack-row'
            }
        },
        getRightCellClass({row, column, rowIndex, columnIndex}) {
            const diff = row.diff
            let cellClass = ''
            diff.forEach(v => {
                if (column.property === v.key) {
                    if (v.diffType === 'LACK') {
                        if (!v.rightValue && v.leftValue) {
                            cellClass = 'lack-cell'
                        }
                    } else if (v.diffType === 'DIFF') {
                        cellClass = 'diff-cell'
                    }
                }
            })
            return cellClass
        },
        getCellClassName({row}) {
            const column = row
            if (column.diffType === 'LACK') {
                return 'lack-cell'
            }
            if (column.diffType === 'DIFF') {
                return 'diff-cell'
            }
            if (column.diffType === 'SAME') {
                return ''
            }
        },
        getTableDiffType(table) {
            if (table.diffType === 'LACK') {
                return {
                    isDiff: true,
                    msg: this.$t('compare.lack'),
                    color: 'danger',
                    diffCount: table.diffCount
                }
            }
            if (table.diffType === 'DIFF') {
                return {
                    isDiff: true,
                    msg: this.$t('compare.diff') + '(' + table.diffCount + ')',
                    color: 'primary',
                    diffCount: table.diffCount
                }
            }
            if (table.diffType === 'SAME') {
                return {
                    isDiff: false,
                    msg: this.$t('compare.same'),
                    color: '',
                    diffCount: table.diffCount
                }
            }
        },
        getColumnDiffType(column) {
            if (column.diffType === 'LACK') {
                return {
                    isDiff: true,
                    msg: this.$t('compare.lack'),
                    color: 'danger',
                    diffCount: column.diffCount
                }
            }
            if (column.diffType === 'DIFF') {
                return {
                    isDiff: true,
                    msg: this.$t('compare.diff') + '(' + column.diffCount + ')',
                    color: 'warning',
                    diffCount: column.diffCount
                }
            }
            if (column.diffType === 'SAME') {
                return {
                    isDiff: false,
                    msg: this.$t('compare.same'),
                    color: '',
                    diffCount: column.diffCount
                }
            }
        },
        filterTable() {
            if (this.filters.kw) {
                this.filterTableDiffs = this.tableDiffs.filter(v => {
                    let b = true
                    if (this.filters.type === 'table' && this.filters.kw) {
                        b = b && (v.left.tableName && v.left.tableName.toLowerCase().indexOf(this.filters.kw.toLowerCase()) > -1)
                            || (v.right.tableName && v.right.tableName.toLowerCase().indexOf(this.filters.kw.toLowerCase()) > -1)
                        return b
                    }
                    if (this.filters.type === 'column' && this.filters.kw) {
                        const columnAttrs = v.left.columnAttrs || v.right.columnAttrs
                        if (columnAttrs) {
                            b = b && columnAttrs.filter(c => c.columnName && c.columnName.toLowerCase().indexOf(this.filters.kw.toLowerCase()) > -1).length > 0
                        }
                        return b
                    }
                })
            } else {
                this.filterTableDiffs = this.tableDiffs
            }
        },
        showDiffSql() {
            this.showDiffSqlDraw = true
        }
    }
}
</script>


<style scoped lang="scss">
.diff-result {
  .datasource-name {
    font-size: 18px;
    padding: 10px 0 10px 0;
  }

  .datasource-row {
    background: #efefef;
  }

  :deep(.column-info) {
    .el-descriptions__cell {
      border: none !important;
    }
  }


  :deep(.lack-row) {
    background: #fa7272;
    color: white;
  }

  :deep(.lack-cell) {
    background: #fa7272;
    color: white;
  }

  :deep(.lack-text) {
    color: #f57243;
    font-weight: bold;
  }


  :deep(.diff-cell) {
    background: #985afd;
    color: white;
  }

  :deep(.el-table) {
    border-radius: 5px;


    tr:hover {
      td {
        color: #ffffff !important;
        background: rgb(91, 93, 96) !important;
      }
    }

  }

}

</style>